import React, { useEffect, useRef, useContext, useState, useCallback, useMemo } from 'react';
import { ScrollView, Dimensions, Image, ImageBackground, Text, TextInput, TouchableOpacity, View, Alert, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import Ionicons from 'react-native-vector-icons/Ionicons';
import { w1, w2, w3, w4, w5, w6, w7, w8, w9 } from '../constants';
import Modal from 'react-native-modal';
import Slider from '@react-native-community/slider';
import { loadAppConfig, removeCollect, saveAppConfig, saveCollect } from '../util/StorageUtil';

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height
const artImgWidth = width / 5;
const artImgHeight = artImgWidth * 161 / 525
const mTop = height / 5



export const NameDetail = (props) => {
    const [fontSize, setFontSize] = useState(18)
    const [isVisible, setIsVisible] = useState(false)
    const [wasCollect, setWasCollect] = useState(false)

    const [gbColor, setBgColor] = useState('#fff')
    const [content, setContent] = useState('')
    const [title, setTitle] = useState('')
    const { isCollect, item } = props.route.params

    const handleCollect = () => {
        setWasCollect(!wasCollect);
        if(wasCollect){
            removeCollect(item.xm)
        }else{
            saveCollect(item)
        }
      };
    useEffect(() => {

        setContent(item?.jx)

       setNavOptions()
        loadAppConfig().then((res) => {
            if (res) {
                global.AppConfig = res
                setFontSize(res.fontSize)
                setBgColor(res.backgroundColor)
            }

        }).catch((err) => {
            console.log('loadAppConfig err', err);
        })

    })
    const setNavOptions = () => {
        props.navigation.setOptions({
            headerRight: ({ focused, color, size }) => (
                <View style={{ flexDirection: 'row' }}>
                    <TouchableOpacity
                        onPress={handleCollect}
                        style={{ flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12 }}>
                        <Ionicons
                            name={wasCollect ? 'heart' : 'heart-outline'}
                            size={22}
                            color={wasCollect ? 'crimson' : "#444"}
                        />

                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={() => { setIsVisible(true) }}
                        style={{ flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12 }}>
                        <Ionicons
                            name='settings-outline'
                            size={22}
                            color={"#444"}
                        />

                    </TouchableOpacity>
                </View>
            )
        })
    }
    const setReaderFontSize = (fontSize) => {
        setFontSize(fontSize)
        AppConfig.fontSize = fontSize
        saveAppConfig(AppConfig)
    }
    const setBackgroundColor = (color) => {
        setBgColor(color)
        AppConfig.backgroundColor = color
        saveAppConfig(AppConfig)
    }
    const itemMenu = () => {
        return (
            <Modal

                backdropOpacity={0.3}
                backdropColor="#000"
                // useNativeDriver={true}
                // coverScreen={false}
                // deviceWidth={Device.getDeviceWidth()}
                // deviceHeight={Device.getDeviceHeight()}
                // animationInTiming={400}
                style={{
                    justifyContent: 'flex-end',
                    margin: 0,
                    borderTopStartRadius: 10,
                    borderTopEndRadius: 10
                }}
                // propagateSwipe={true}

                isVisible={isVisible}
                // onSwipeComplete={toggleMenuModal}
                swipeDirection={['down']}
            >
                <View
                    onStartShouldSetResponder={() => { return true }}
                    onResponderRelease={() => {
                        setIsVisible(false)
                        // console.warn("onResponderRelease");
                    }}

                    style={{

                        flex: 1, justifyContent: 'flex-end'
                    }}>
                    <View style={{
                        backgroundColor: '#fff', borderTopStartRadius: 10,
                        borderTopEndRadius: 10,
                    }}>

                        <View style={{ alignItems: 'center', paddingBottom: 30, borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: '#eee' }}>
                            <Text style={{ padding: 14 }}>字体大小</Text>
                            <Slider
                                style={{ width: width - 28, padding: 14 }}
                                minimumValue={12}
                                maximumValue={46}
                                value={fontSize}
                                thumbTintColor='deeppink'
                                minimumTrackTintColor="deeppink"
                                maximumTrackTintColor="#eee"
                                onSlidingComplete={(value) => setReaderFontSize(value)}
                            />


                            <View

                                style={{ width: '100%' }}>
                                <Text style={{ padding: 14, alignSelf: 'center' }}>背景皮肤</Text>
                                <View style={{ padding: 14, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around' }}>
                                    <TouchableOpacity
                                        style={{
                                            backgroundColor: 'white',
                                            borderWidth: 1,
                                            borderColor: '#ddd',
                                            width: width / 10,
                                            height: width / 10,
                                            borderRadius: width / 20
                                        }}
                                        onPress={() => {
                                            setBackgroundColor('white')
                                        }}>
                                        <Text></Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        style={{
                                            backgroundColor: 'palegreen',
                                            width: width / 10,
                                            height: width / 10,
                                            borderRadius: width / 20
                                        }}
                                        onPress={() => {
                                            setBackgroundColor('palegreen')
                                        }}>
                                        <Text></Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        style={{
                                            backgroundColor: 'paleturquoise',
                                            width: width / 10,
                                            height: width / 10,
                                            borderRadius: width / 20
                                        }}
                                        onPress={() => {
                                            setBackgroundColor('paleturquoise')
                                        }}>
                                        <Text></Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        style={{
                                            backgroundColor: 'papayawhip',
                                            width: width / 10,
                                            height: width / 10,
                                            borderRadius: width / 20
                                        }}
                                        onPress={() => {
                                            setBackgroundColor('papayawhip')
                                        }}>
                                        <Text></Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        style={{
                                            backgroundColor: 'pink',
                                            width: width / 10,
                                            height: width / 10,
                                            borderRadius: width / 20
                                        }}
                                        onPress={() => {
                                            setBackgroundColor('pink')

                                        }}>
                                        <Text></Text>
                                    </TouchableOpacity>

                                </View>
                            </View>


                        </View>
                        <TouchableOpacity
                            onPress={() => { setIsVisible(false) }}
                            style={{ backgroundColor: '#eee', margin: 30, marginTop: 0, borderRadius: 20, justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ fontSize: 16, marginVertical: 10, color: '#333' }}>取消</Text>
                        </TouchableOpacity>
                    </View>



                </View>

            </Modal>
        )
    }
    return (
        <ScrollView style={{ backgroundColor: gbColor }} >
            <Text style={{ fontSize: fontSize, lineHeight: fontSize * 1.8, fontWeight: 'bold', padding: 10, paddingBottom: 16, alignSelf: 'center' }}>{title}</Text>
            <Text selectable={true} style={{
                fontSize: fontSize,
                lineHeight: fontSize * 1.8,
                textAlign: 'justify',
                padding: 0,
                paddingHorizontal: 18,
                paddingBottom:24
            }}>{content}</Text>
            {itemMenu()}

        </ScrollView>
    )

}

